<script lang="ts" setup>

import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
    isShow: {
        type: Boolean,
        default: true
    },
    width: {
        type: Number,
        default: 230
    }
});

const popoverVisible = ref(false);
const popoverRef = ref<HTMLElement | null>(null);

// 设置菜单弹出框的显示与隐藏
const isPopoverVisible = () => {
    if (props.isShow) {
        popoverVisible.value = !popoverVisible.value;
    }
}

// 点击其他地方隐藏弹出框
const handleClickOutside = (event: MouseEvent) => {
    if (popoverRef.value && !popoverRef.value.contains(event.target as Node)) {
        popoverVisible.value = false;
    }
}

onMounted(() => {
    document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
    document.removeEventListener('click', handleClickOutside);
});


</script>

<template>
    <el-popover :visible="popoverVisible" :width="props.width">
        <template #reference>
            <div ref="popoverRef" @click="isPopoverVisible">
                <slot name="reference"></slot>
            </div>
        </template>
        <slot></slot>
    </el-popover>
</template>

<style lang="scss" scoped></style>